import Layout from './view/Layout';
import ImageView from './view/ImageView';
import RectView from './view/RectView';
import TextView from './view/TextView';
import utils from './utils';


export default class MkView extends Layout {
    private canvas: HTMLCanvasElement;
    private ctx: CanvasRenderingContext2D;

    public constructor() {
        super();
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
    }

    public setWidth(width: number) {
        super.setWidth(width);
        this.canvas.width = utils.getScaleRatioSize(width);
    }

    public setHeight(height: number) {
        super.setHeight(height);
        this.canvas.height = utils.getScaleRatioSize(height);
    }

    public render() {
        return this.draw(this.ctx);
    }

    public getCanvas() {
        return this.canvas;
    }

    public toImage() {
        return this.canvas.toDataURL('data:image/png;');
    }

    public toBase64() {
        return this.toImage().replace('data:image/png;base64,', '');
    }

    public toFile(filename: string = 'file') {
        const mime = 'image/png';
        const str = atob(this.toBase64());
        let i = str.length;
        const uint8Array = new Uint8Array(i);
        while (i--) {
            uint8Array[i] = str.charCodeAt(i);
        }
        return new File([uint8Array], filename, {
            type: mime
        });
    }

}


export {
    MkView,
    Layout,
    ImageView,
    RectView,
    TextView
}
